<template>
	<view>
		<custom-header title="修改密码" />
		<view class="account_wrap">
			<view class="form_wrap">
				<view class="form_item">
					<view class="input">
						<input type="number" password v-model="form.password" placeholder="请输入密码" />
					</view>
				</view>
				<view class="form_item">
					<view class="input">
						<input type="number" password v-model="form.password2" placeholder="请再次确认密码" />
					</view>
				</view>
				<view class="form_item">
					<view class="input">
						<input type="number"  v-model="form.code" placeholder="手机验证码" />
					</view>
					<view class="btn" @click="getVerificationCode">
						{{ buttonText }}
					</view>
				</view>
			</view>
			<view class="button_btn" hover-class="confirm_hover" :hover-stay-time="200">保存</view>
		</view>
	</view>
	<!-- 弹出层提示 -->
	<custom-toast 
		:show="isShowToast"
		:config="toastConfig"
		@cancel="hideToast"
		@confirm="confirmToast" />
</template>

<script setup>
	import { ref,computed,onUnmounted} from 'vue'
	import { isvalidPhoneNumber } from '../../utils/validate.js'
	
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹窗确认按钮
	const confirmToast = (data)=>{
		console.log(data)
		if(data?.type == 'submit'){
			
		}else{
			hideToast()
		}
	}
	
	
	const phone = '186****2036'
	const form = ref({})
	
	
	// 获取验证码 倒计时
	const isCounting = ref(false)
	const countdown = ref(0)
	const totalTime = ref(60)
	const copySuccess = ref(false)
	// 计算按钮文本
	const buttonText = computed(() => {
	  if (isCounting.value) {
		return `${countdown.value}s后可再次发送`
	  }
	  return `发送到${phone}`
	})
	
	// 获取验证码
	const getVerificationCode = () => {
	  if (isCounting.value) return
	  // 这里可以添加实际的API请求
	  console.log(`获取验证码，手机号: ${phone}`)
	  // 开始倒计时
	  startCountdown()
	}
	// 开始倒计时
	const startCountdown = () => {
	  isCounting.value = true
	  countdown.value = totalTime.value
	  // 设置定时器
	  const timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
		  clearInterval(timer)
		  isCounting.value = false
		}
	  }, 1000)
	  // 存储定时器以便清理
	  timerRef.value = timer
	}
	// 存储定时器引用
	const timerRef = ref(null)
	
	// 组件卸载时清除定时器
	onUnmounted(() => {
	  if (timerRef.value) {
		clearInterval(timerRef.value)
	  }
	})
	
</script>

<style lang="scss">
	.input_wrap{
		padding: 30rpx;
		display: flex;
		align-items: center;
		.input{
			flex: 1;
			height: 88rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 0 25rpx;
			input{
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #555555;
			}
		}
		.btn{
			width: 280rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 10rpx;
			background: #F5564D;
			margin-left: 20rpx;
			color: #fff;
			font-size: 24rpx;
		}
	}
	.button_btn{
		width: 638rpx;
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		border-radius: 108rpx;
		background: #F5564D;
		margin-top: 20rpx;
		color: #fff;
		font-size: 32rpx;
		margin: 30rpx auto 0;
	}
	.textarea_wrap{
		padding: 30rpx;
		.input{
			padding: 25rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 0 25rpx;
			input{
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #555555;
			}
		}
	}
	.image_wrap{
		padding: 30rpx;
		.upload_wrap{
			padding: 25rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
		}
		
	}
	.account_wrap{
		padding: 30rpx;
		.form_wrap{
			padding: 0 25rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			.form_item{
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				.icon{
					width: 32rpx;
					height: 32rpx;
				}
				.input{
					flex: 1;
					padding-left: 10rpx;
					input{
						font-size: 28rpx;
						width: 100%;
					}
				}
				.btn{
					width: 280rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					background: #F5564D;
					color: #FFFFFF;
					font-size: 24rpx;
				}
				
			}
		}
	}
</style>
